<!-- src/components/SvgCanvas.vue -->

<script setup>
import { onMounted, ref, defineExpose, defineEmits } from 'vue'
import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.select.js'
import '@svgdotjs/svg.resize.js'
import '@svgdotjs/svg.draggable.js'

import { createShape } from '@/utils/shapeFactory.js'
const emit = defineEmits(['select-shape'])

const canvasEl = ref(null)
let draw = null

const shapeMap = {}
let idCounter = 1
let selectedId = null

onMounted(() => {
  draw = SVG().addTo(canvasEl.value).size('100%', '100%')
})

function addShape(type, x = 10, y = 10) {
  const id = `s${idCounter++}`
  const shape = createShape(type, draw)

  if (!shape) return

  shape.move(x, y)

  shape.attr('data-id', id)
  shapeMap[id] = shape

  shape
    .select({
      onSelect: (box, angle, eventType, event, handler) => {
        console.log('box', box)
        console.log('angle', angle)
        console.log('eventType', eventType)
        console.log('event', event)
        shape.active(true)
      },
    })
    .resize({
      onResize: (box, angle, eventType, event, handler) => {
        console.log('box', box)
        console.log('angle', angle)
        console.log('eventType', eventType)
        console.log('event', event)
        shape.active(true)
      },
    })
    .draggable()
  shape.on('click', () => selectShape(id))

  selectShape(id)
}

function selectShape(id) {
  // 取消旧高亮
  if (selectedId && shapeMap[selectedId]) {
    shapeMap[selectedId].select(false)
  }

  selectedId = id
  const shape = shapeMap[id]
  shape.select()
  console.log('shape', shape.attr())

  const attrs = {
    id,
    type: shape.type,
    ...shape.attr(),
  }
  emit('select-shape', attrs)
}

function updateShape(id, attrs) {
  const shape = shapeMap[id]
  if (!shape) return
  for (const key in attrs) {
    if (key in shape.attr()) {
      shape.attr(key, attrs[key])
    }
  }
}

// 拖拽到画布时，添加图形
function handleDrop(event) {
  event.preventDefault()
  const type = event.dataTransfer.getData('shape-type')
  if (!type) return
  const canvasRect = canvasEl.value.getBoundingClientRect()
  const dropX = event.clientX - canvasRect.left
  const dropY = event.clientY - canvasRect.top
  addShape(type, dropX, dropY)
}

defineExpose({
  addShape,
  updateShape,
})
</script>
<template>
  <div ref="canvasEl" class="svg-wrapper" @dragover.prevent @drop="handleDrop"></div>
</template>

<style>
.svg-wrapper {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
}
.svg_select_shape {
  stroke-width: 1;
  stroke-dasharray: 10 10;
  stroke: #000;
  stroke-opacity: 0.1;
  pointer-events: none;
  fill: none;
}
.svg_select_shape_pointSelect {
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 10 10;
  stroke: #000;
  stroke-opacity: 0.8;
  pointer-events: none;
}
.svg_select_handle {
  stroke-width: 3;
  stroke: #000;
  fill: none;
}
.svg_select_handle_rot {
  fill: #fff;
  stroke: #000;
  stroke-width: 1;
  cursor: move;
}
.svg_select_handle_lt {
  cursor: nw-resize;
}
.svg_select_handle_rt {
  cursor: ne-resize;
}
.svg_select_handle_rb {
  cursor: se-resize;
}
.svg_select_handle_lb {
  cursor: sw-resize;
}
.svg_select_handle_t {
  cursor: n-resize;
}
.svg_select_handle_r {
  cursor: e-resize;
}
.svg_select_handle_b {
  cursor: s-resize;
}
.svg_select_handle_l {
  cursor: w-resize;
}
.svg_select_handle_point {
  stroke: #000;
  stroke-width: 1;
  cursor: move;
  fill: #fff;
}
</style>
